<template>
  <h1>App</h1>
  <div class="nav">
    <!-- <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link> -->
    <!-- <router-link :to="{name:'home'}">home</router-link>
    <router-link :to="{name:'about'}" >about</router-link>
    <router-link  to="/user/123" >user123</router-link>
    <router-link to="/home/recommand/" >推荐</router-link> -->
    <button @click="Homebtn">home</button>
    <button @click="Aboutbtn">about</button>
  </div>
  <router-view></router-view> 
</template>
<script setup>
import { useRouter } from 'vue-router';
import Recommand from "../views/Recommand.vue";
const router = useRouter();
router.beforeEach((to, from) =>
{
  if (to.path != '/login')
  {
    return '/login';
  }
})
function Homebtn()
{  
  router.push({
    path:"/home"
  })
}
function Aboutbtn()
{
  router.push({
    path: "about"
   })
}

let vip = true;
if (vip)
{
  router.addRoute({ path: "/vip", component: Recommand });
  router.push('/vip')
}
</script>
<style scoped lang="less">
.router-link-active
{
   border: 1px solid black;
   border-radius: 12px;
   font-size: 12px;

}
</style>